<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
<span name="gotop"></span>
<div id="main">
</div>
<div id="loader" class="loading">
    <img src="./img/loading.gif" height="200px" width="200px">
</div>
<a href="#gotop">
    <img src="./img/back.png" height="50px" width="50px" id="back" alt="" style="position: fixed; left: 2px; top: 3px;display: none;">
    <img src="./img/top.png" height="60px" width="60px" id="gotop" alt="" style="position: fixed; right: 10px; bottom: 10px;display: none;">
    <img src="./img/refresh.png" id="refresh" alt=""
         style="width: 50px; height: 50px; position: fixed; right: 7px; bottom: 10px;display: none;">
</a>
<script src="./js/pulltoload.js"></script>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/layer.js"></script>
<script>
    $(function () {
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 20000) {
                    $("#gotop").fadeIn(300);//一秒渐入动画
                    $("#refresh").fadeOut(300);//一秒渐隐动画
                    $("#back").fadeOut(300);//一秒渐隐动画
                } else {
                    $("#gotop").fadeOut(300);//一秒渐隐动画
                    $("#refresh").fadeIn(300);//一秒渐隐动画
                    $("#back").fadeIn(300);//一秒渐隐动画
                }
            });
            $("#gotop").click(function () {
                $('body,html').animate({scrollTop: 0}, 1500);
            });
            $("#refresh").click(function () {
                window.location.reload();
            });
            $("#back").click(function () {
                window.location.href = "/"
            });
        });
    });
</script>
<script>
    var start = 0;
    var end = 5;
    var pull = new PullToLoad("body")

    function isContains(str, substr) {
        return str.indexOf(substr) >= 0;
    }

    $(document).ready(function () {
        var opt = {"start": start, "end": end};
        $.ajax({
            type: "post",
            url: "/api/video",
            dataType: "json",
            contentType: "application/json",      //网上很多介绍加上此参数的，后来我发现不加入这个参数才会请求成功。
            data: JSON.stringify(opt),
            success: function (d) {
                for (var i = 0; i < 5; i++) {
                    let isMp4 = isContains(d[i], "mp4");
                    if (isMp4) {
                        var video = document.createElement("video");
                        video.src = d[i];
                        video.controls = "controls";
                        main.appendChild(video);
                        $("#main video").fadeIn(2000);//一秒渐隐动画
                    }
                }
                start = start + 5;
                end = end + 5;
            }
        });
    });

    pull.on("load", function (reset) {
        var opt = {"start": start, "end": end};
        $.ajax({
            type: "post",
            url: "/api/video",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(opt),
            success: function (d) {
                for (var i = 0; i < 5; i++) {
                    let isMp4 = isContains(d[i], "mp4");
                    if (isMp4) {
                        var video = document.createElement("video");
                        video.src = d[i];
                        video.controls = "controls";
                        main.appendChild(video);
                        $("#main video").fadeIn(2000);//一秒渐隐动画
                    }
                }
            }
        });
        start = start + 5;
        end = end + 5;

        setTimeout(function () {
            reset();
        }, 2000)

    })
</script>
</body>
</html>